List group using CSS3 and HTML
To implement a list group using HTML and CSS3, you can create and customize lists of items to achieve a group-like look.
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Group Example using html and css</title>
<style>
/* Basic styling for list items */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 10px;
margin-bottom: 5px;
background-color: whitesmoke;
border: 1px solid lightgray;
border-radius: 5px;
}
/* Styling for list group */
.list-group {
width: 300px;
margin: 0 auto;
}
/* Styling for hover effect */
li:hover {
background-color: #e0e0e0;
}
/* Center the heading */
.headting-text{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="headting-text">
<h3>List Group Example using HTML and CSS3</h3>
</div>
<div class="list-group">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
</div>
</body>
</html>
In the example above
- We create an unsorted list (<ul>) to hold list items.
- Each listed item (<li>) represents an item in the list set.
- We use basic styling to reference objects by providing padding, margins, background color, borders, and
border-radiusto achieve a group-like look. - We use the
.list-groupclass to style the container of the list group. In this example we set fixed width and center horizontally at the page usingmargin: 0 auto;. - Additionally, we add a hover effect to list objects to change the background color while hovering.
Output-
You can still customize the look of the list group by changing the CSS style to suit your layout needs. Additionally, you can add multiple inventory items or edit the content as needed.
Also, Read: Explain all selectors in CSS3
Leave Comment